<!--
 * @Author: your name
 * @Date: 2022-04-08 09:21:41
 * @LastEditTime: 2022-04-08 09:23:40
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \geyao\geyao\less,sass,scss区别220408.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>less</title>
</head>

<body>
  <script>
    // less, sass, scss都是css预处理语言（ 也是对应的文件后缀名）， 它们的语法功能比css更强大。
    // 预处理语言使用是： 开发时用预处理语言， 在打包上线时， 用webpack再配合loader工具给转成css（ Cascading Style Sheets） 给浏览器使用。

    // scss 的基本语法：
    // 1. 可以使用$来标识变量（ 可以将常用的样式标记成变量， 后续复用即可， 方便维护）
    // 2. 嵌套语法（ 和less语法相同）
    // 3. & 父选择器(跟less语法相同)

    // 假如你想针对某个特定子元素 进行设置
    // 4. 模块化

    // 可以将需要的变量定义在一个新的js文件中， 需要使用的样式文件直接引入即可
  </script>
</body>

</html>